<template>
  <div class="home">
    <div class="header">
      <div class="header-title">
        <img src="../assets/images/yiqiyuanlogoshow.png" alt="" srcset="">
        <span>中震云·地震综合信息平台</span>
      </div>
      <div class="header-message">
        <svg-icon icon-class="message" />
        <span>{{cityData.city}}</span>
        <span>{{cityData.casts ? cityData.casts[0][`${timeChange()}temp`] : '24'}}°C</span>
        <span>{{cityData.casts ? cityData.casts[0][`${timeChange()}weather`] : '晴'}}</span>
        <span class="linkStatus linkStatus-true">连接正常</span>
        <span style="width: 130px;">{{time}}</span>
      </div>
    </div>
    <div :style="{position: 'relative', height: (windowHeight - 48) + 'px'}">
      <map-box :deviceKey="deviceKey" :maker="value1" />
    <!-- :style="`top: ${headFlag !== '1' ? '50px;' : '0px;'}`" -->
    <div class="content-left">
      <!-- <div>
        <div class="content-title">
          <span>系统告警</span>
          <span style="color:rgba(140, 140, 140, 1);cursor: pointer;">更多<i
              class="el-icon-arrow-right"></i></span>
        </div>
        <div class="content-text">

        </div>
      </div> -->

      <div>
        <div class="content-title">
          <span>地震预警和速报</span>
          <div>
            <el-switch v-model="value1">
            </el-switch>
          </div>
          <!-- <span style="color:rgba(140, 140, 140, 1);cursor: pointer;">更多<i
              class="el-icon-arrow-right"></i></span> -->
        </div>
        <div class="content-text">
          <eay-warning />
        </div>
      </div>

      <div>
        <div class="content-title">
          <span>系统告警</span>
          <!-- <span style="color:rgba(140, 140, 140, 1);cursor: pointer;">更多<i
              class="el-icon-arrow-right"></i></span> -->
        </div>
        <div class="content-text">
          <sys-alarm />
        </div>
      </div>
      <div>
        <div class="content-title">
          <span>设备型号统计</span>
        </div>
        <div class="content-text">
          <eq-type-stat />
        </div>
      </div>
    </div>
    <div class="content-right" v-if="false">
      <div></div>
      <div>
        <div class="content-title">
          <span>设备所在区域统计</span>
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              {{scopeText}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,index) in scopeList" :command="item" :key="index">
                {{item.name}}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="content-text">
          <eq-loc-stat />
        </div>
      </div>
      <div>
        <div class="content-title">
          <span>设备型号统计</span>
        </div>
        <div class="content-text">
          <eq-type-stat />
        </div>
      </div>
    </div>

    <div class="deviceChange">
      <div v-for="item in deviceData" :key="item.icon" @click="deviceChange(item)"
        :class="item.icon == deviceIcon ? 'true' : ''">
        <svg-icon :icon-class="item.icon" />
        <span>{{item.text}}</span>
      </div>
      <!-- <div>
        <svg-icon icon-class="itm" />
        <span>烈度仪</span>
      </div>
      <div>
        <svg-icon icon-class="sms" />
        <span>强震仪</span>
      </div>
      <div>
        <svg-icon icon-class="wrgt" />
        <span>预警终端</span>
      </div> -->
    </div>

    <div class="tab">
      <div @click="upFun">
        <!-- <i class="el-icon-plus" v-show="headFlag == '1'"></i>
        <i class="el-icon-minus" v-show="headFlag !== '1'"></i> -->
        <svg-icon :icon-class="headFlag !== '1'?'exit-fullscreen':'fullscreen'" />
      </div>
    </div>
    <el-dialog title="地震预警" :visible.sync="open" :close-on-click-modal='false' width="500px">
      <div style="position: relative;">
        <div class="dialogBox">
          <div>
            <div>{{ alarmData.regeocode ? alarmData.regeocode.formattedAddress : ''}}</div>
            <div><i class="el-icon-location-outline"></i><span>{{alarmData.distance}}km</span></div>
          </div>
          <div>位置：纬度 {{alarmData.epiLat}}° 经度 {{alarmData.epiLon}}°</div>
          <div>时间：{{alarmData.oriTime}}</div>
          <div>震级: {{alarmData.magnitude}}</div>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="震情速报" :visible.sync="open1" :close-on-click-modal='false' width="500px">
      <div style="position: relative;">
        <div class="dialogBox">
          <div>
            <div>{{quickData.locName}}</div>
            <div><i class="el-icon-location-outline"></i><span>{{quickData.distance}}km</span></div>
          </div>
          <div>位置：纬度 {{quickData.epiLat}}° 经度 {{quickData.epiLon}}°</div>
          <div>时间：{{quickData.oriTime}}</div>
          <div>震级: {{quickData.magnitude}}</div>
        </div>
      </div>
    </el-dialog>
    </div>
    
  </div>
</template>

<script>
// import screenfull from 'screenfull';
import mapBox from '@/components/Map/index.vue';
import eayWarning from '@/components/Home/earlyWarning.vue';
import sysAlarm from '@/components/Home/systemAlarm.vue';
import eqTypeStat from '@/components/Home/eqTypeStat.vue';
import eqLocStat from '@/components/Home/eqLocationStat.vue';
import { getQuickReportLog, getWarningLog, weather } from '@/api/api.js';
import { mapGetters } from 'vuex';
export default {
  name: 'Index',
  components: {
    mapBox,
    eayWarning,
    sysAlarm,
    eqTypeStat,
    eqLocStat,
  },
  dicts: ['home_device_type'],
  data() {
    return {
      value1: false,
      deviceData: [
        {
          text: '全部设备',
          icon: 'all',
          key: 0,
        },
        // {
        //   text: '烈度仪',
        //   icon: 'itm',
        // },
        // {
        //   text: '强震仪',
        //   icon: 'sms',
        // },
        {
          text: '预警终端',
          icon: 'wrgt',
          key: 3,
        },
      ],
      deviceKey: 0,
      deviceIcon: 'all',
      // 版本号
      open: false,
      open1: false,
      version: '3.8.2',
      scopeList: [
        {
          name: '全国',
          value: 0,
        },
        {
          name: '武汉',
          value: 1,
        },
      ],
      scopeText: '全国',
      quickData: [],
      alarmData: [],
      timer1: null,
      timer2: null,
      quickTime: new Date().getTime(),
      alarmTime: new Date().getTime(),
      cityData: {},
      time: '',
      windowHeight: document.documentElement.clientHeight // 实时屏幕高度
    };
  },
  watch: {
    windowHeight (val) {

    }
  },
  mounted() {
    const _this = this;
    window.onresize = () => {
      _this.windowHeight = document.documentElement.clientHeight
    }
    // this.timer1 = setInterval(() => {
    //   console.log(1111);
    //   _this.getQuick();
    //   // this.getAlarm();
    // }, 30000);
    // this.timer2 = setInterval(() => {
    //   console.log(2222);
    //   // this.getQuick();
    //   _this.getAlarm();
    // }, 30000);
    // if (this.headFlag !== '1') {
    //   console.log(111);
    //   screenfull.toggle();
    // }
    this.getCity();
    // this.timeChange()
    const vm = this;
    vm.timeItem = setInterval(() => {
      const time = new Date();
      vm.time = `${time.getFullYear()}-${
        time.getMonth() + 1
      }-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`;
    }, 1000);
  },

  methods: {
     timeChange() {
      const date = new Date().getHours();
      if (date > 19) {
        return 'night';
      } else {
        return 'day';
      }
    },
    async getCity() {
      const res = await weather({ adcode: this.city });
      console.log(res);
      if (res.code == 200) {
        this.cityData = res.data[0];
      }
    },
    deviceChange(item) {
      this.deviceIcon = item.icon;
      this.deviceKey = item.key;
    },
    upFun() {
      if (this.headFlag == '1') {
        this.$store.dispatch('app/setHead', '0');
        this.fullScreen();
      } else {
        // requestFullScreen();
        this.$store.dispatch('app/setHead', '1');
        this.exitScreen();
      }
    },
    //全屏
    fullScreen() {
      var el = document.documentElement;
      var rfs =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullscreen;
      if (typeof rfs != 'undefined' && rfs) {
        rfs.call(el);
      }
      return;
    },
    //退出全屏
    exitScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
      if (typeof cfs != 'undefined' && cfs) {
        cfs.call(el);
      }
    },

    goTarget(href) {
      window.open(href, '_blank');
    },
    handleCommand(command) {
      console.log(command);
      this.scopeText = command.name;
    },
    async getQuick() {
      const location = encodeURIComponent(this.location);
      const res = await getQuickReportLog({
        address: location,
        sysKey: 'zzyearthquakewarning',
        preDate: this.quickTime,
      });
      if (res.code == 200 && res.data.length > 0) {
        this.quickData = res.data[0];
        this.quickTime = new Date(this.quickData.oriTime).getTime();
        this.open1 = true;
      }
    },
    async getAlarm() {
      const location = encodeURIComponent(this.location);
      const res = await getWarningLog({
        address: location,
        sysKey: 'zzyearthquakewarning',
        preDate: this.alarmTime,
      });
      if (res.code == 200 && res.data.length > 0) {
        this.alarmData = res.data[0];
        this.alarmTime = new Date(this.alarmData.oriTime).getTime();
        this.open = true;
      }
    },
  },
  computed: {
    ...mapGetters(['headFlag', 'city', 'location']),
  },
  deactivated() {
    clearInterval(this.timer1);
    clearInterval(this.timer2);
  },
  beforeDestroy() {
    clearInterval(this.timer1);
    clearInterval(this.timer2);
  },
};
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  position: relative;
}
.deviceChange {
  position: absolute;
  top: calc(100% - 160px);
  left: 17%;
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 140px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  padding: 8px 8px;
  > div {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 14px;
    border-radius: 4px;
    padding: 0 6px;
    color: #7f7f7f;
    margin: 2px 0;
    > span {
      margin-left: 8px;
    }
    &:hover {
      background: rgba(59, 161, 255, 0.09);
      color: #1890ff;
    }
  }
  .true {
    background: rgba(59, 161, 255, 0.09);
    color: #1890ff;
  }
}
.tab {
  position: absolute;
  right: 12px;
  bottom: 20px;
  cursor: pointer;
  > div {
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 16px;
    background: #fff;
    border-radius: 5px;
  }
}
.dialogBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 50%;
  > div {
    // width: 400px;
    padding: 4px 0;
    // margin-left: 50%;
    transform: translateX(-50%);
    &:nth-child(1) {
      // font-size: 19px;
      display: flex;
      // white-space: nowrap;
      > div {
        &:nth-child(1) {
          font-weight: 600;
          color: rgba(0, 0, 0, 0.85);
        }
        &:nth-child(2) {
          // color: red;
          margin-left: 20px;
          width: 100px;
        }
      }
    }
  }
}
// .header {
//   display: flex;
//   justify-content: space-between;
//   width: 100%;
//   height: 48px;
//   background: url('../assets/images/header.png') no-repeat center center;
//   box-shadow: 0px 0px 6px 0px rgba(0, 21, 41, 0.12);
//   z-index: 9999;
// }
// .header-title,
// .header-message {
//   display: flex;
//   align-items: center;
//   height: 100%;
//   text-align: center;
// }
// .header-title {
//   font-size: 16px;
//   font-weight: 600;
//   color: #ffffff;
//   > img {
//     width: 28px;
//     height: 28px;
//     margin: 0 16px 0 24px;
//   }
// }
// .header-message {
//   margin-right: 24px;
//   > span {
//     display: inline-block;
//     margin: 0 8px;
//     height: 24px;
//     line-height: 24px;
//     font-size: 14px;
//   }
//   .linkStatus {
//     position: relative;
//     margin: 0 40px 0 48px;
//   }
//   .linkStatus-true {
//     &::before {
//       content: ' ';
//       display: inline-block;
//       position: absolute;
//       top: 50%;
//       transform: translate(-16px, -50%);
//       width: 8px;
//       height: 8px;
//       background: rgba(82, 196, 26, 1);
//       border-radius: 50%;
//     }
//   }
//   .linkStatus-false {
//     &::before {
//       content: ' ';
//       display: inline-block;
//       position: absolute;
//       top: 50%;
//       transform: translate(-16px, -50%);
//       width: 8px;
//       height: 8px;
//       background: red;
//       border-radius: 50%;
//     }
//   }
// }
.content-left,
.content-right {
  position: absolute;
  display: flex;
  // bottom: 32px;
  top: 0px;
  flex-direction: column;
  width: 280px;
  height: calc(100% - 8px);
  // background: red;
  > div {
    flex: 1;
    margin: 8px 0;
    background: #fff;
    border-radius: 4px;
    height: 0;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
  }
}
.content-left {
  left: 24px;
}
.content-right {
  right: 24px;
}
.content-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 54px;
  border: 1px solid rgba(240, 240, 240, 1);
  padding: 0 16px;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
}
.content-text {
  width: 100%;
  height: calc(100% - 54px);
  padding: 16px;
}
::v-deep .el-dialog__wrapper {
  margin-top: 24vh;
}
::v-deep .el-dialog__header {
  border-bottom: 1px solid rgba(140, 140, 140, 0.4);
}
</style>

<style lang="scss" scoped>
@import '~@/assets/styles/mixin.scss';
@import '~@/assets/styles/variables.scss';

.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  background: url('../assets/images/header.png') no-repeat center center;
  box-shadow: 0px 0px 6px 0px rgba(0, 21, 41, 0.12);
  // z-index: 999;
}
.header-title,
.header-message {
  display: flex;
  align-items: center;
  height: 100%;
  text-align: center;
}
.header-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  > img {
    width: 28px;
    height: 28px;
    margin: 0 16px 0 24px;
  }
}
.header-message {
  margin-right: 24px;
  > span {
    display: inline-block;
    margin: 0 8px;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
  }
  .linkStatus {
    position: relative;
    margin: 0 24px 0 32px;
  }
  .linkStatus-true {
    &::before {
      content: ' ';
      display: inline-block;
      position: absolute;
      top: 50%;
      transform: translate(-16px, -50%);
      width: 8px;
      height: 8px;
      background: rgba(82, 196, 26, 1);
      border-radius: 50%;
    }
  }
  .linkStatus-false {
    &::before {
      content: ' ';
      display: inline-block;
      position: absolute;
      top: 50%;
      transform: translate(-16px, -50%);
      width: 8px;
      height: 8px;
      background: red;
      border-radius: 50%;
    }
  }
}
.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}

.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}
.app-main-box {
  // margin-top: 50px;
  box-sizing: border-box;
  // padding-top: 50px;
  height: calc(100vh - 0px);
  // height: 100vh;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  width: calc(100% - #{$base-sidebar-width});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.sidebarHide .fixed-header {
  width: 100%;
}

.mobile .fixed-header {
  width: 100%;
}
</style>

